<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#one" data-toggle="tab">盘点明细</a></li>
        </ul>
    </div>
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="刷新"><i class="fa fa-refresh"></i></a>
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover" width="100%">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        var inventoryId = "{$inventory.id}";
        var options = {
            url: $.fn.bootstrapTable.defaults.extend.index_url + '?inventory_id=' + inventoryId,
            pk: 'id',
            sortName: 'id',
            columns: [
                [
                    {checkbox: true},
                    {field: 'id', title: 'ID'},
                    {field: 'material_code', title: '物料编码'},
                    {field: 'material_name', title: '物料名称'},
                    {field: 'location_code', title: '库位编码'},
                    {field: 'location_name', title: '库位名称'},
                    {field: 'book_quantity', title: '账面数量'},
                    {field: 'actual_quantity', title: '实际数量'},
                    {field: 'diff_quantity', title: '差异数量'},
                    {field: 'unit', title: '单位'},
                    {field: 'remark', title: '备注'}
                ]
            ]
        };
        var table = $("#table").bootstrapTable(options);
        
        $(document).on("click", ".btn-refresh", function () {
            $("#table").bootstrapTable('refresh');
        });
    });
</script>

